<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>KPI管理页</title>
		<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<style>
			select{
				width: 150px;
				color: #666;
				height: 38px;
			    line-height: 1.3;
			    border:1px solid #e6e6e6;
			    background-color: #fff;
			    border-radius: 2px;
			    padding-left: 5px;
			}
		</style>
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb" style="visibility: visible;">
		        <a href="">员工管理</a>
		        <a>
	          		<cite>KPI列表</cite>
		        </a>
	      	</span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i>
			</a>
		</div>
		<div class="wrap">
			<blockquote class="layui-elem-quote news_search">
				<div class="layui-inline">
					<a id="" class="layui-btn layui-btn-normal" onclick="WeAdminShow('新增KPI','./kpi-add.html')">添加</a>
				</div>
				<div style="margin-left:30px;" class="layui-inline">
					<select id="kpi_type" onchange="kpiTypeChange()" class="valid">
						<option value="-1">全部</option>
						<option value="1">行数据</option>
						<option value="0">列数据</option>
					</select>
				</div>
			</blockquote>
			<!-- 数据表格 -->
			<table class="layui-table" lay-filter="kpiItem_table" id="kpiItem_table" style="margin: 0"></table>
		</div>
		<script src="../../publicjs/jquery-1.8.0.min.js"></script>
		<script src="../../lib/layui/layui.js"></script>
		<script src="../../static/js/admin.js" charset="utf-8"></script>
		<script src="../../publicjs/smallkingutil.js"></script>
		<script>
			layui.use(['form', 'table'], function() {
				var table = layui.table;
				var form = layui.form;
				window.form = form;
				// 加载数据表格
				window.kpiItemTable = table.render({
					id: 'kpiItemTable',
					elem: '#kpiItem_table',
					url: commonUtil.domain() +'/admin/wxwork/kpi/item/list', // 数据接口
					method: 'get',
					page: true, // 开启分页
					request: {
						pageName: 'pageNum', // 分页当前页数发给后台的参数名
						limitName: 'pageSize' // 分页每页多少条发给后台的参数名
					},
					done:function(res){
						$('.layui-laypage-count').text('共'+res.total+'条')
					},
					cols: [
						[ //表头
							 // 如果那天说这个表格要导出了 放开代码
							 // {type: 'checkbox', fixed: 'left'},
						    {
								field: 'kpiCode',
								title: 'KPI编号',
								edit: 'text',
								width: 100
							},{
								field: 'kpiName',
								title: 'KPI名称',
								width: 100
							},{
								field: 'sortCode',
								title: '排序码',
								width: 100
							},{
								field: 'note',
								title: '备注',
								width: 200
							},{
								field: 'type',
								title: '类型',
								width: 90,
								templet: '#type'
							},{
								field: 'showOnHome',
								title: '首页展示',
								width: 90,
								templet: '#show'
							},{
								field: 'oper',
								title: '操作',
								width: 100,
								templet: '#oper'
							}
							
						]
					]
				});
				// 刷新表格
				kpiItemTable.refresh = function(data) {
					kpiItemTable.reload({
						where: data,
						page: {
							curr: 1 //重新从第 1 页开始
						}
					});
				}
				// TODO 导出按钮
				window.kpiItemSearch = function(res){
					var checkStatus = table.checkStatus("kpiItemTable");
				    var data = checkStatus.data; // 获取选中的数据
				    table.exportFile("kpiItemTable", data, 'csv');
				}
				// 下拉框变更事件
				window.kpiTypeChange = function(res){
					var type = $('#kpi_type option:selected').val();
					var data = {};
					if(type != -1){
						data.type = type;	
					}
					kpiItemTable.refresh(data);
				}
				// 监听表单提交
				table.on('tool(kpiItem_table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					  var data = obj.data; // 获得当前行数据
					  var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					  var tr = obj.tr; // 获得当前行 tr 的DOM对象
					  if(layEvent == 'delete'){ // 点击表格一行的移除按钮
							 layer.confirm("确定要删除此KPI吗？", function(index){
								// 发送ajax请求 删除地区
								var ajaxParam = {
									url : commonUtil.domain() + "/admin/wxwork/kpi/item/delete",//删除接口地址
									data : {
										id : data.id
									}
								}
								ajaxUtil.post(ajaxParam, function(){
									layer.closeAll();
									kpiItemTable.refresh();
								});
							 });
					  }else if(layEvent == 'update'){
						  WeAdminShow('修改KPI','kpi-add.html?id=' + data.id)
					  }
				});
			});
		</script>
		<script type="text/html" id="type">
			{{# if(d.type == 1){ }}
			行数据{{# } else { }}
			列数据{{# } }}		
		</script>
		<script type="text/html" id="show">
			{{# if(d.showOnHome == 1){ }}
			<span style="margin-left:18px;" class="layui-btn layui-btn-normal layui-btn-xs">是</span>{{# } else { }}
			<span style="margin-left:18px;" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled">否</span> {{# } }}		
		</script>
		<script type="text/html" id="oper">
  			<a title="修改" lay-event="update"><i class="layui-icon">&#xe642;</i></a>
		    <a title="删除" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>
		</script>
	</body>

</html>